<script setup lang="ts">

function cut(){
  let route=useRoute()
  let currentPath:string=route.path
  // console.log(currentPath)
  let targetPath:string=''
  if(currentPath.includes('passenger')){
    targetPath=currentPath.replace('passenger', 'driver')
    roleStore().setRole('1')
  }else if(currentPath.includes('driver')){
    targetPath=currentPath.replace('driver', 'passenger')
    roleStore().setRole('0')
  }else{
    showNotify({
      message:'该页面不需要切换哦~',
      duration:2000,
      type:'primary'
    })
    return
  }
  // console.log(targetPath)
  navigateTo(targetPath)
}
onMounted(function (): void {
  if(!webSocketStore().getWS()){
    showNotify('建立连接出错')
  }
})
</script>

<template>
  <div class="content">
    <header class="top-bar">
      <van-nav-bar
          :title="barTitleStore().getTitle()"
      >
        <template #left>
          <van-button style="height: 65%" @click="cut()">切换</van-button>
        </template>
      </van-nav-bar>
    </header>
    <main class="main-content">
      <slot name="default"></slot>
    </main>
    <footer class="bottom-bar">
      <van-tabbar v-model="bottomBarStore().index">
        <van-tabbar-item icon="home-o" @click="navigateTo('/home')">首页</van-tabbar-item>
        <van-tabbar-item icon="todo-list-o" @click="navigateTo('/stroke')">我的行程</van-tabbar-item>
        <van-tabbar-item icon="bill-o" @click="navigateTo('/bills')">我的账单</van-tabbar-item>
        <van-tabbar-item icon="contact-o" @click="navigateTo('/person')">个人中心</van-tabbar-item>
      </van-tabbar>
    </footer>
  </div>

</template>

<style scoped>
.content {
  display: flex;
  height: 100vh;
  flex-direction: column;
}
.top-bar{
  height: 47px;
  background-color: darkgray;
  position: relative;
}
.main-content{
  display: flex;
  flex-direction: column;
  align-items: center;
  height: calc(100vh - 98px);
  overflow: auto;
  background-color: #f4f4f4;
}
.bottom-bar {
  background-color: darkgray;
  height: 51px;
}
</style>